<template>
  <div class="Declare">
    <PublicHead></PublicHead>
    <div class="declareBox">
      <div class="title">
        <div>示范平台申报</div>
        <div>/&ensp;SHIFANPINTAISHENBAO</div>
      </div>
      <div class="title2">
        【申请资料】
      </div>
      <!-- 申请资料 -->
      <div class="tableBox">
        <el-table :data="tableData" class="my-table" border style="width: 100%;">
          <el-table-column width="60px" align="center" label="序号" prop="id"
            :label-class-name="'table-header'"></el-table-column>
          <!-- 是否必填 -->
          <el-table-column width="100px" align="center" label="是否必填" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span v-if="scope.row.id !== '11' && scope.row.id !== '10' && scope.row.id !== '13'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span class="name">
                {{
                  scope.row.name | flitt() }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="附件" width="150" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <el-icon class="iconDownload" name="download"></el-icon>
              <span class="text" @click="download(scope.row)">{{ scope.row.moban }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '资料上传') }"
                :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '资料上传') }"
                multiple :before-remove="handbefore" :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                :file-list="fileList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
                <span v-if="false" class="text1">{{ scope.row.file }}</span>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column align="center" label="辅助证明文件上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                :data="uploadfile(row.name, '辅助证明文件上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                multiple :before-remove="handbefore" :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                :file-list="fileList">

                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
                <span v-if="false" class="text1">{{ scope.row.file }}</span>
              </el-upload>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!-- 相关资料 -->
      <div class="title2">
        【相关资料】
      </div>
      <div class="tableBox">
        <el-table :data="tableData2" class="my-table" border style="width: 100%;">
          <el-table-column width="60px" align="center" label="序号" prop="id"
            :label-class-name="'table-header'"></el-table-column>
          <!-- 是否必填 -->
          <el-table-column width="100px" align="center" label="是否必填" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span v-if="scope.row.id !== '11' && scope.row.id !== '10' && scope.row.id !== '13'"
              >是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <span class="name">{{
                scope.row.name | flitt() }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="附件" width="150" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <el-icon class="iconDownload" name="download"></el-icon>
              <span class="text" @click="download(scope.row)">{{ scope.row.moban }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '资料上传') }"
                :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '资料上传') }"
                :before-remove="handbefore" multiple :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                :file-list="fileList">
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
                <span v-if="false" class="text1">{{ scope.row.file }}</span>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column align="center" label="辅助证明文件上传" :label-class-name="'table-header'">
            <template slot-scope="{row}">
              <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
                :data="uploadfile(row.name, '辅助证明文件上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
                :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                :on-remove="(response, file, fileList) => { return beforeRemove(response, file, fileList, row.id, row.name, '辅助证明文件上传') }"
                multiple :before-remove="handbefore" :limit="3" :on-exceed="handleExceed" :accept="'.pdf'"
                :file-list="fileList">
                <span v-if="false">{{ row.name }}</span>
                <el-icon class="iconDownload1" name="upload2"></el-icon>
                <span class="text1">上传文件</span>
                <span v-if="false" class="text1">{{ scope.row.file }}</span>
              </el-upload>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!-- 附件说明 -->
      <div class="title2">
        【附件说明】
      </div>
      <div class="fujian" @click="handlePreviewone()">
        兰州市工业和信息化委员会关于印发兰州中小企业公共服务示范平台认定和管理办法的通知.pdf
      </div>
      <!-- <div class="fujian" >
        兰州市工业和信息化委员会关于做好2019年兰州市中小企业公共服务示范平台申报工作的通知.pdf
      </div> -->
      <!-- 相关联系人 -->
      <div class="title2">
        【相关联系科室】
      </div>
      <div class="lianxi">
        <div>兰州市中小企业公共服务平台</div>
        <div>双创科</div>
        <div>4535093</div>
      </div>
      <div class="tableFoot">
        <button @click="submit(4, '保存成功')">保存</button>
        <button @click="submit(0, '提交成功')">提交</button>
        <button @click="quxiao">取消</button>
      </div>
    </div>
    <PublicFoot></PublicFoot>
    <preview-Dialog :res='resData'></preview-Dialog>
  </div>
</template>

<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { http } from '@/until/http'
import { shifan_add, download, moban_list, upload_file } from '../api/api'
import previewDialog from '../components/preview.vue'
export default {
  data() {
    return {
      https: http,
      uploadData: {

      },
      resData: {},
      fileList: [],
      response: '',
      tableData: [],
      tableData2: [],
      token: '',
      upload: {
        "userId": this.$store.state.userId,
        "file1": { "1,兰州市中小企业公共服务示范平台申请推荐表_资料上传": [] },
        "file2": { "1,兰州市中小企业公共服务示范平台申请推荐表_辅助证明文件上传": [] },
        "file3": { "2,兰州市中小企业公共服务示范平台主要从业人员情况表_资料上传": [] },
        "file4": { "2,兰州市中小企业公共服务示范平台主要从业人员情况表_辅助证明文件上传": [] },
        "file5": { "3,兰州市中小企业公共服务示范平台服务设施设备清单_资料上传": [] },
        "file6": { "3,兰州市中小企业公共服务示范平台服务设施设备清单_辅助证明文件上传": [] },
        "file7": { "4,申请报告提纲_资料上传": [] },
        "file8": { "4,申请报告提纲_辅助证明文件上传": [] },
        "file9": { "5,服务中小企业名单及满意度评价表(测评企业数量不少于30家)_资料上传": [] },
        "file10": { "5,服务中小企业名单及满意度评价表(测评企业数量不少于30家)_辅助证明文件上传": [] },
        "file11": { "6,法人证书或营业执照副本(复印件)_资料上传": [] },
        "file12": { "6,法人证书或营业执照副本(复印件)_辅助证明文件上传": [] },
        "file13": { "7,上一年度审计报告及服务收支情况的专项审计报告、或上一年度包含服务收支情况的审计报告_资料上传": [] },
        "file14": { "7,上一年度审计报告及服务收支情况的专项审计报告、或上一年度包含服务收支情况的审计报告_辅助证明文件上传": [] },
        "file15": { "8,开展相关服务的佐证材料(通知、照片、总结等)_资料上传": [] },
        "file16": { "8,开展相关服务的佐证材料(通知、照片、总结等)_辅助证明文件上传": [] },
        "file17": { "9,国家和省市颁发的从业资格(资质)、许可证等佐证材料(复印件)_资料上传": [] },
        "file18": { "9,国家和省市颁发的从业资格(资质)、许可证等佐证材料(复印件)_辅助证明文件上传": [] },
        "file19": { "10,与服务能力相关的专利、商标、品牌、标准、软件著作权等佐证材料(复印件)_资料上传": [] },
        "file20": { "10,与服务能力相关的专利、商标、品牌、标准、软件著作权等佐证材料(复印件)_辅助证明文件上传": [] },
        "file21": { "11,市(州)及以上政府主管部门授予的荣誉证书(证明)复印件、获得各级政府的扶持情况_资料上传": [] },
        "file22": { "11,市(州)及以上政府主管部门授予的荣誉证书(证明)复印件、获得各级政府的扶持情况_辅助证明文件上传": [] },
        "file23": { "12,示范平台申报单位须确保申报材料的真实性和完整性,填报申报材料真实性声明(加盖公章)_资料上传": [] },
        "file24": { "12,示范平台申报单位须确保申报材料的真实性和完整性,填报申报材料真实性声明(加盖公章)_辅助证明文件上传": [] },
        "file25": { "13,其他佐证材料_资料上传": [] },
        "file26": { "13,其他佐证材料_辅助证明文件上传": [] },
        "level": localStorage.getItem('area'),
        "applicationType": localStorage.getItem('type'),
        "dataType": 0,
        pprovalStatus: ''
      },
      data: {
        userId: '',
        applicationType: '0',
        level: '0',
        dataType: '0'
      }
    };
  },
  methods: {
    //取消申报
    quxiao() {
      this.$router.go(-1)
    },
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    zancun() {
      console.log(this.fileList);
    },
    //提交表单
    submit(state, name) {
      this.upload.pprovalStatus = state
      const area = localStorage.getItem('area')
      const type = localStorage.getItem('type')
      if (state == '4') {
        shifan_add(this.upload).then((res) => {
          if (res.data.state == '20000') {
            this.$message({
              message: name,
              type: 'success',
            });
            this.$router.push('/homepage');
          } else {
            this.$message.error(res.data.message);
          }
        })
      } else if (state == '0') {
        console.log(area, type);
        let wj1 = Object.values(this.upload.file1)
        let wj2 = Object.values(this.upload.file3)
        let wj3 = Object.values(this.upload.file5)
        let wj4 = Object.values(this.upload.file7)
        let wj5 = Object.values(this.upload.file9)
        let wj6 = Object.values(this.upload.file11)
        let wj7 = Object.values(this.upload.file13)
        let wj8 = Object.values(this.upload.file15)
        let wj9 = Object.values(this.upload.file17)
        let wj10 = Object.values(this.upload.file23)
        console.log(wj1);
        console.log(wj2);
        console.log(wj3);
        console.log(wj4);
        console.log(wj5);
        console.log(wj6);
        console.log(wj7);
        console.log(wj8);
        console.log(wj9);
        console.log(wj10);
        console.log(this.upload);
        if (wj1[0].length <= 0 || wj2[0].length <= 0 || wj3[0].length <= 0 || wj4[0].length <= 0 || wj5[0].length <= 0 || wj6[0].length <= 0 || wj7[0].length <= 0 || wj8[0].length <= 0 || wj8[0].length <= 0 || wj9[0].length <= 0 || wj10[0].length <= 0) {
          this.$message.error('您有必填项的文件未上传')
        } else {
          shifan_add(this.upload).then((res) => {
            if (res.data.state == '20000') {
              this.$message({
                message: name,
                type: 'success',
              });
              this.$router.push('/homepage');
            } else {
              this.$message.error(res.data.message);
            }
          })
        }
      }




    },
    download(row) {
      var fileData = {
  1: {
    url: './file/中小企业公共服务平台申请推荐表.xls',
    fileName: row.name
  },
  2: {
    url: './file/兰州市中小企业公共服务示范平台主要从业人员情况表.xls',
    fileName: row.name
  },
  3: {
    url: './file/兰州市中小企业公共服务示范平台服务设施设备清单.xls',
    fileName: row.name
  },
  4: {
    url: './file/申请报告提纲.doc',
    fileName: row.name
  },
  5: {
    url: './file/服务中小企业名单及满意度评价表.xls',
    fileName: row.name
  },
  12: {
    url: './file/真实性的声明.xls',
    fileName: row.name
  }
};

if (fileData.hasOwnProperty(row.id)) {
  var data = fileData[row.id];
  let link = document.createElement("a");
  link.href = data.url;
  link.setAttribute("download", data.fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}else{
  this.$message({
          message: '暂无附件',
          type: 'warning'
        });
}
    },
   
    //点击删除按钮

    //预览文件
    handlePreview(file) {
      upload_file({ fileId: file.response.data }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))
submit
        window.open(url)
      })

    },
     //预览附件说明
     handlePreviewone() {
      var url ='./file/兰州市中小企业公共服务示范平台认定管理办法.pdf'
        window.open(url)
     

    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(response, file, fileList, id, name, type) {
      console.log(response);
      console.log(response, file, fileList, id, name, type);
      if (response && response.status == "success") {
        console.log(response, file, fileList, id, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          for (var key in this.upload) {
            if (key.slice(4, 6) == (id * 2) - 1) {
              console.log(this.upload[key][name]);
              var index = this.upload[key][name].indexOf(response.response.data)
              this.upload[key][name].splice(index, 1)
              console.log(this.upload[key][name]);
            }
          }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          for (var keys in this.upload) {
            if (keys.slice(4, 6) == (id * 2)) {
              console.log(this.upload[keys][name]);
              var index = this.upload[keys][name].indexOf(response.response.data)
              this.upload[keys][name].splice(index, 1)
              console.log(this.upload[keys][name]);
            }
          }
        }
      }
    },
    handbefore(file) {
      return this.$confirm(`确定移除 ${file.name}?`)
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, id, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, id, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          for (var key in this.upload) {
            console.log(key);
            if (key.slice(4, 6) == (id * 2) - 1) {
              console.log(this.upload[key][name]);
              this.upload[key][name].push(response.data)
              // console.log( this.upload[key][name].push(response.data));
              console.log(this.upload);
            }
          }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          for (var keys in this.upload) {
            if (keys.slice(4, 6) == (id * 2)) {
              //  console.log(this.upload[keys]);
              this.upload[keys][name].push(response.data)
              // console.log( this.upload[key][name].push(response.data));
              console.log(this.upload);
            }
          }
        }
      }

    }
  },

  mounted() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId
    this.tableData = this.$store.state.shenbaoData.tableData
    this.tableData2 = this.$store.state.shenbaoData.tableData2

    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })
  },
  filters: {
    flitt(name) {
      console.log(name);
      var name1 = name.split(',')
      var name2 = name1.pop()
      console.log(name2);
      return name2.toString()
    }
  },
  components: {
    PublicHead,
    PublicFoot,
    previewDialog
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}

.tableBox {
  margin-bottom: 20px;

}

.declareBox {
  width: 1220px;
  height: 100%;
  background: #FFFFFF;
  margin: 30px auto;
  box-sizing: border-box;
  padding: 10px 50px;

  .title {
    display: flex;

    div:nth-of-type(1) {
      width: 120px;
      height: 50px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #262626;
      line-height: 50px;
      margin-bottom: 20px;
      border-bottom: 4px #1285D7 solid;

    }

    div:nth-of-type(2) {
      height: 50px;
      font-size: 15px;
      font-family: Arial;
      font-weight: 400;
      color: #DCDCDC;
      line-height: 50px;
      margin-right: 5px;

      border-bottom: 4px #1285D7 solid;

    }

    div:nth-of-type(3) {
      width: 189px;
      height: 50px;
      font-size: 15px;
      font-family: Arial;
      font-weight: 400;
      color: #DCDCDC;
      line-height: 50px;

      border-bottom: 4px #1285D7 solid;

    }

  }

  .title2 {
    width: 150px;
    height: 40px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
  }
}

.fujian {
  width: 1136px;
  height: 55px;
  background: #EBF5FC;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1285D7;
  line-height: 55px;
  margin: 10px 0px;
  padding-left: 20px;
  cursor: pointer;
}

.lianxi {
  display: flex;
  margin-bottom: 50px;

  div {
    width: 230px;
    height: 55px;
    background: #FAFAFA;
    border: 2px solid #EEEEEE;
    line-height: 55px;
    text-align: center;
  }

  div:nth-of-type(1) {
    width: 30%;
  }
}

.tableFoot {
  width: 100%;
  display: flex;
  justify-content: center;

  button {
    margin: 0px 10px;

    &:hover {
      cursor: pointer;
    }
  }

  button:nth-of-type(1) {
    width: 98px;
    height: 40px;
    background: #F39200;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    color: white;
  }

  button:nth-of-type(2) {
    width: 98px;
    height: 40px;
    background: #2797E8;
    border-radius: 3px 3px 3px 3px;
    border: 0;

    color: white;
  }

  button:nth-of-type(3) {
    width: 98px;
    height: 40px;
    background: #ccc;
    border-radius: 3px 3px 3px 3px;
    color: white;
    border: 0;
  }
}

.name {
  width: 208px;
  height: 45px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FD8544;
}

.text {
  cursor: pointer;
  color: #1285D7;
}

.iconDownload {
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1285D7;
}

.el-table__header {
  background-color: #1285D7 !important;
  color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
  background-color: #1285D7 !important;
  color: white;
  font-size: 16px;
}

.status {
  width: 48px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #D62502;
}

.el-button--primary {
  background-color: #fd8544;
  border-color: #fd8544;
}
</style>